<template>
	<view>
		<view class="animation" :class="'animation-' + animation">
			<view class="checkbox-wrap flex align-center justify-center" @click="change">
				<checkbox-group>
					<label>
						<checkbox :value="agree.value" :checked="agree.checked" style="transform:scale(0.5)" />
					</label>
				</checkbox-group>
				<view>
					已阅读并同意“<text class="text-blue">用户协议</text>”和“<text class="text-blue">隐私政策</text>”
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		emits: ['change','update:checked'],
		props: {
			checked: {
				type: Boolean,
				default: false,
				required: false
			}
		},
		data() {
			return {
				animation: '', // 动画样式
				agree: {
					name: 'isAgreed',
					value: 'isAgreed',
					checked: false

				}
			}
		},
		created() {
			this.agree.checked = this.checked
		},
		methods: {
			change() {
				this.agree.checked = !this.agree.checked
				this.$emit('change', this.agree.checked)
				this.$emit('update:checked', this.agree.checked)
			},
			shake() {
				this.animation = 'shake';
				setTimeout(() => {
					this.animation = ''
				}, 500);
			},
		}
	}
</script>

<style>
	.animation {}

	.animation-shake {
		animation: shake 0.3s !important;
	}

	@keyframes shake {

		0%,
		100% {
			transform: translateX(0)
		}

		10% {
			transform: translateX(-9px)
		}

		20% {
			transform: translateX(8px)
		}

		30% {
			transform: translateX(-7px)
		}

		40% {
			transform: translateX(6px)
		}

		50% {
			transform: translateX(-5px)
		}

		60% {
			transform: translateX(4px)
		}

		70% {
			transform: translateX(-3px)
		}

		80% {
			transform: translateX(2px)
		}

		90% {
			transform: translateX(-1px)
		}
	}
</style>
